import { useConfigCameraStore } from '@/stores/configCamera'
import { ElButton, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus'
import { storeToRefs } from 'pinia'
import { defineComponent, Fragment } from 'vue'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  setup() {
    const { t } = useI18n()
    const configCameraStore = useConfigCameraStore()
    const { formRef } = storeToRefs(configCameraStore)
    return () => (
      <ElDialog
        model-value={configCameraStore.formVisible}
        title={t('tian-jia')}
        close-on-click-modal={false}
        close-on-press-escape={false}
        onClose={configCameraStore.handleCancel}
        class="pr-14"
        width="60vw"
        align-center
      >
        {{
          default: () => (
            <ElForm
              ref={formRef}
              model={configCameraStore.formData}
              rules={configCameraStore.formRules}
              label-width="200"
            >
              {configCameraStore.formFields.map((item) => (
                <ElFormItem label={item.title} prop={item.prop}>
                  <ElInput
                    modelValue={configCameraStore.formData[item.prop] as string}
                    onInput={(val: any) => configCameraStore.setForm(val, item.prop)}
                  />
                </ElFormItem>
              ))}
            </ElForm>
          ),
          footer: () => (
            <Fragment>
              <ElButton
                loading={configCameraStore.loading}
                type="primary"
                onClick={configCameraStore.handleSubmit}
              >
                {t('que-ding')}
              </ElButton>
            </Fragment>
          )
        }}
      </ElDialog>
    )
  }
})
